<template>
	<view class="animated fadeIn faster" style="height: 100vh;background: #fff;">
		<view class="px-3 pt-5 pb-4">
			<view class="d-flex d-flex-column d-flex-middle mb-10">
				<view class="welcom">欢迎登录注册</view>
				<view class="font22 color999">首次验证通过即成功注册账号</view>
			</view>
			
			<view class="position-relative mb-4">
				<input v-model="phone" class="inpt" placeholder="请输入手机号码" placeholder-class="colorhold" />
			</view>
			<view class="position-relative mb-8">
				<input v-model="code" class="inpt" placeholder="短信验证码" placeholder-class="colorhold" />
				<view class="code-btn" @click="sendCode" :class="totalTime<60?'sending':''">{{codeBtnText}}</view>
			</view>
			<button class="login-button" @click="sure">登录/注册</button>
		</view>
	</view>
</template>

<script>
	import { userApi } from '@/http/userApi';
	import store from '@/store/index.js';
	import { manner } from "@/util/manner.js";
	import { USER_TOKEN } from '@/constants/local-storage-key-const';
	export default {
		data() {
			return {
				totalTime: 60,
				timer: null,
				codeBtnText: '发送验证码',
				code: '' ,
				phone:'',
			}
		},
		methods: {
			async sendCode(){
				let that = this
				if(that.phone.length !== 11){
					uni.showToast({
						title:'请输入正确的手机号码',
						icon:'none',
					})
					return
					
				}
				if(that.totalTime == 60){
					try{
						uni.showLoading({
							title:'发送中'
						})
						let res=await userApi.sendCode(that.phone)
						console.log(res);
						uni.hideLoading()
						that.startTimer()
					}catch(e){
						uni.hideLoading()
						console.log('error',e)
					}
				}
			},
			startTimer() {
				if (this.timer) return;
				this.totalTime--;
				this.codeBtnText = `${this.totalTime}s后发送`;
				this.timer = setInterval(() => {
				    if (this.totalTime <= 0) {
				        clearInterval(this.timer);
				        this.timer = null;
				        this.codeBtnText = '发送验证码';
						this.totalTime = 60
				    } else {
				        this.totalTime--;
				        this.codeBtnText = `${this.totalTime}s后发送`;
				    }
				}, 1000);
			},
			async sure(){
				let that = this
				if(that.phoneNum.length !== 11){
					uni.showToast({
						title:'请输入正确的手机号码',
						icon:'none'
					})
					return
				}
				if(!that.code){
					uni.showToast({
						title:'请输入短信验证码',
						icon:'none'
					})
					return
				}
				try{
					uni.showLoading({
						title:'登录中...'
					})
					const res = await userApi.loginByCode({'type':1,'code':that.code,'phone':that.phoneNum})
					uni.setStorageSync(USER_TOKEN, res.token)
					uni.setStorageSync('myId', res.user_id)
					store.commit('setUserInfo',{'phone':that.phoneNum,'userId':res.user_id,'userType':res.verify,'token':res.token})
					manner.goBack()
				}catch(e){
					console.log(e)
				}finally{
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.welcom{
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	font-weight: 500;
	font-size: 52rpx;
	color: #00a6a7;
}
.inpt{
	position: relative;
	border: 1px solid #d0d2d9;
	height: 48px;
	padding-left: 20px;
	border-radius: 8px;
	box-sizing: border-box;
	transition: all .2s linear;
}
.inpt:hover{
	border-color: #00a6a7
}
.login-button{
	background: linear-gradient(90deg,#00bebd,#01a7a7);
	border-radius: 8px;
	line-height: 48px;
	font-size: 16px;
	font-weight: 500;
	border: none;
	cursor: pointer;
	color: #fff;
	padding: 0;
	transition: all .2s linear;
}
.code-btn{
	position: absolute;
	right: 1px;
	top: 1px;
	line-height: 44px;
	height: 44px;
	border-radius: 8px;
	letter-spacing: 1px;
	text-align: center;
	cursor: pointer;
	font-size: 16px;
	background-color: #fff;
	padding: 0 20px;
	color: #00a6a7;
	border: 0;
}
.sending{
	color: #999;
	white-space: nowrap;
	font-size: 14px;
	letter-spacing: 0;
	cursor: default;
}
</style>
